<template>
    <div class="paymentRoot">
        <xxl-status></xxl-status>
        <div class="ctx" :style="{ height: 'calc( 100% - ' + header.top + 'px)' }">
            <title>
                <div slot="left">
                    <div @click="back()">返回</div>
                </div>
                <div>账单</div>
            </title>
            <scroll-view class="content" scroll-y="true">
                <div class="item">
                    <div class="time">时间:{{ order.orderList.createTime }}</div>
                    <div class="id">单号:{{ order.orderList.id }}</div>
                    <div class="status">状态:{{ formatStatus(order.orderList.state) }}</div>
                    <div class="info" v-for="(item, k) in order.goodsList" :key="k"> <span class="imgbox"><img class="img"
                                :src="item.img" alt=""></span><span class="name">{{ item.name }}</span><span class="much">x{{
                                    item.count
                                }}</span><span class="money">￥ {{ moneyFormat(item.price) }}</span></div>
                </div>
            </scroll-view>
            <div class="foot">
                <div class="total"><span>合计:</span><span class="money">￥ {{ moneyFormat(order.orderList.totalPrice)
                }}</span></div>
                <div class="buttons">
                    <div class="button" v-show="s_b"><xxl-botton p="15" back="white" h="30" b="1px solid #999">
                            <div class="b_s">取消订单</div>
                        </xxl-botton></div>
                    <div class="button" @click="pay()" v-show="s_b"><xxl-botton p="15" h="30">
                            <div class="b_a">支付订单</div>
                        </xxl-botton></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import api from '../api';


export default {
    name: 'WorkspaceJsonIndex',

    data() {
        return {
            order: {}
        };
    },
    onLoad(o) {
        api.getOrderDataOne(o.id).then((d) => {
            if (d.code == 200) {
                this.order = d.data
            }

        })
    },
    mounted() {

    },
    props: {
        s_b: {
            default: true
        }
    },
    computed: {

    },
    methods: {
        back() {
            uni.navigateBack()
        },
        formatStatus(d) {
            switch (d) {
                case 1:
                    return '待支付'
                case 2:
                    return '已付款'
                case 3:
                    return '已完成'
            }
        },
        async pay(){
            await api.pay(this.order.orderList.id)
            uni.navigateBack()
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.paymentRoot {
    height: 100vh;
}

.ctx {}

.content {
    height: calc(100% - $uni-nav - 50px);
    background: $uni-bg-color-g;
}

.item {
    min-height: 100%;
    margin: 10px;
    border-radius: 15px;
    background: $uni-text-color-inverse;
    box-sizing: border-box;
    padding: 20px;

    .time,
    .much {
        color: $uni-text-color-grey;
    }

    .money {
        color: orangered;
    }

    .info {
        display: flex;
        box-sizing: border-box;
        margin: 10px;
        justify-content: space-around;
    }

    .imgbox {
        width: 30px;
        height: 30px;

    }

    .img {
        height: 100%;
        width: 100%;
    }
}

.foot {
    height: 50px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;

    .total {
        margin-left: 10px;
    }

    .money {
        color: orangered;
    }

    .button {
        margin-right: 10px;
    }

    .buttons {
        display: flex;
    }

    .b_s,
    .b_a {
        font-size: 15px;
        font-weight: lighter;
    }

    .b_s {
        color: $uni-text-color;
    }
}</style>